<template>
  <div class="assignment-page">
    <!-- 任务分配统计卡片 -->
    <div class="stat-row">
      <el-card v-for="stat in statistics" :key="stat.title" class="stat-card">
        <div class="stat-content">
          <div class="stat-header">
            <span class="stat-title">{{ stat.title }}</span>
            <el-tooltip :content="stat.tooltip" placement="top">
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </div>
          <div class="stat-body">
            <span class="stat-value">{{ stat.value }}</span>
            <el-icon :class="['stat-icon', stat.trend]">
              <component :is="stat.icon" />
            </el-icon>
          </div>
          <div class="stat-footer">
            <span :class="['trend', stat.trend]">
              {{ stat.trend === 'up' ? '+' : '-' }}{{ stat.percentage }}%
            </span>
            <span class="compare">较上周</span>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 主要内容区 -->
    <div class="main-content">
      <!-- 左侧：机器人列表 -->
      <el-card class="robot-list">
        <template #header>
          <div class="section-header">
            <h3>可用机器人</h3>
            <div class="header-actions">
              <el-input
                v-model="searchQuery"
                placeholder="搜索机器人"
                prefix-icon="Search"
                clearable
                class="search-input"
              />
              <el-button type="primary" @click="refreshList">
                <el-icon><Refresh /></el-icon>
                刷新列表
              </el-button>
            </div>
          </div>
        </template>

        <el-table
          :data="filteredRobots"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="id" label="机器人ID" width="100" />
          <el-table-column prop="name" label="名称" width="120" />
          <el-table-column prop="type" label="类型" width="100">
            <template #default="{ row }">
              <el-tag :type="getTypeTag(row.type)">{{ row.type }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="getStatusType(row.status)">
                {{ row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="battery" label="电量" width="180">
            <template #default="{ row }">
              <el-progress
                :percentage="row.battery"
                :status="getBatteryStatus(row.battery)"
              />
            </template>
          </el-table-column>
          <el-table-column prop="lastTask" label="上次任务" />
        </el-table>
      </el-card>

      <!-- 右侧：任务分配 -->
      <el-card class="task-assignment">
        <template #header>
          <div class="section-header">
            <h3>任务分配</h3>
            <el-button
              type="primary"
              @click="handleAssignTask"
              :disabled="!selectedRobots.length"
            >
              分配任务
            </el-button>
          </div>
        </template>

        <el-form
          ref="taskForm"
          :model="taskForm"
          label-width="100px"
          class="task-form"
        >
          <el-form-item label="任务类型">
            <el-select
              v-model="taskForm.type"
              placeholder="选择任务类型"
              class="form-select"
            >
              <el-option
                v-for="type in taskTypes"
                :key="type.value"
                :label="type.label"
                :value="type.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="工作区域">
            <el-cascader
              v-model="taskForm.area"
              :options="areaOptions"
              placeholder="选择工作区域"
              class="form-select"
            />
          </el-form-item>

          <el-form-item label="开始时间">
            <el-date-picker
              v-model="taskForm.startTime"
              type="datetime"
              placeholder="选择开始时间"
              class="form-select"
            />
          </el-form-item>

          <el-form-item label="结束时间">
            <el-date-picker
              v-model="taskForm.endTime"
              type="datetime"
              placeholder="选择结束时间"
              class="form-select"
            />
          </el-form-item>

          <el-form-item label="优先级">
            <el-rate v-model="taskForm.priority" :max="3" />
          </el-form-item>

          <el-form-item label="备注">
            <el-input
              v-model="taskForm.notes"
              type="textarea"
              :rows="3"
              placeholder="请输入任务备注"
            />
          </el-form-item>
        </el-form>

        <div class="selected-robots" v-if="selectedRobots.length">
          <h4>已选择的机器人</h4>
          <el-tag
            v-for="robot in selectedRobots"
            :key="robot.id"
            class="robot-tag"
            closable
            @close="removeSelection(robot)"
          >
            {{ robot.name }}
          </el-tag>
        </div>
      </el-card>
    </div>

    <!-- 底部：任务历史记录 -->
    <el-card class="history-section">
      <template #header>
        <div class="section-header">
          <h3>最近分配记录</h3>
          <el-button type="primary" link>查看更多</el-button>
        </div>
      </template>

      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in recentActivities"
          :key="index"
          :type="activity.type"
          :color="activity.color"
          :timestamp="activity.timestamp"
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
// 统计数据
const statistics = ref([
  {
    title: '今日已分配',
    value: '28',
    icon: 'ArrowUp',
    trend: 'up',
    percentage: 12,
    tooltip: '今日已分配的任务总数'
  },
  {
    title: '待分配机器人',
    value: '15',
    icon: 'ArrowDown',
    trend: 'down',
    percentage: 8,
    tooltip: '当前可分配的空闲机器人数量'
  },
  {
    title: '完成率',
    value: '92%',
    icon: 'ArrowUp',
    trend: 'up',
    percentage: 5,
    tooltip: '已完成任务占总任务的百分比'
  },
  {
    title: '平均执行时间',
    value: '47min',
    icon: 'ArrowDown',
    trend: 'down',
    percentage: 15,
    tooltip: '任务平均执行时长'
  }
])

// 机器人列表数据
const robots = ref([
  {
    id: 'R001',
    name: '巡逻机器人A',
    type: '巡逻',
    status: '空闲',
    battery: 85,
    lastTask: '大厅巡逻'
  },
  {
    id: 'R002',
    name: '消防机器人B',
    type: '消防',
    status: '充电中',
    battery: 35,
    lastTask: '消防检查'
  }
  // ... 更多机器人数据
])

// 搜索和筛选
const searchQuery = ref('')
const filteredRobots = computed(() => {
  return robots.value.filter(
    (robot) =>
      robot.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      robot.id.toLowerCase().includes(searchQuery.value.toLowerCase())
  )
})

// 选中的机器人
const selectedRobots = ref([])
const handleSelectionChange = (selection) => {
  selectedRobots.value = selection
}

// 任务表单
const taskForm = ref({
  type: '',
  area: [],
  startTime: '',
  endTime: '',
  priority: 1,
  notes: ''
})

// 任务类型选项
const taskTypes = [
  { label: '巡逻任务', value: 'patrol' },
  { label: '消防检查', value: 'fire' },
  { label: '导览服务', value: 'guide' },
  { label: '清洁任务', value: 'clean' }
]

// 区域选项
const areaOptions = [
  {
    value: 'building1',
    label: '1号楼',
    children: [
      { value: 'f1', label: '1楼' },
      { value: 'f2', label: '2楼' }
    ]
  }
  // ... 更多区域
]

// 最近活动
const recentActivities = ref([
  {
    content: '分配巡逻机器人A到一号楼大厅执行巡逻任务',
    timestamp: '10分钟前',
    type: 'primary',
    color: '#4834d4'
  },
  {
    content: '消防机器人B完成二号楼消防检查任务',
    timestamp: '30分钟前',
    type: 'success',
    color: '#20bf6b'
  }
  // ... 更多活动
])

// 工具函数
const getTypeTag = (type) => {
  const types = {
    巡逻: 'primary',
    消防: 'danger',
    导览: 'success',
    清洁: 'info'
  }
  return types[type] || 'info'
}

const getStatusType = (status) => {
  const types = {
    空闲: 'success',
    任务中: 'primary',
    充电中: 'warning',
    离线: 'info'
  }
  return types[status] || 'info'
}

const getBatteryStatus = (battery) => {
  if (battery <= 20) return 'exception'
  if (battery <= 50) return 'warning'
  return 'success'
}

// 操作函数
const refreshList = () => {
  ElMessage.success('列表已刷新')
}

const removeSelection = (robot) => {
  selectedRobots.value = selectedRobots.value.filter((r) => r.id !== robot.id)
}

const handleAssignTask = () => {
  ElMessage.success('任务分配成功')
}
</script>

<style lang="scss" scoped>
.assignment-page {
  padding: 20px;
  background-color: #f5f6fa;
  min-height: 100vh;

  .stat-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;

    .stat-card {
      .stat-content {
        .stat-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;

          .stat-title {
            color: #636e72;
            font-size: 14px;
          }
        }

        .stat-body {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;

          .stat-value {
            font-size: 24px;
            font-weight: bold;
            color: #2d3436;
          }

          .stat-icon {
            font-size: 24px;
            &.up {
              color: #20bf6b;
            }
            &.down {
              color: #eb3b5a;
            }
          }
        }

        .stat-footer {
          display: flex;
          align-items: center;
          gap: 8px;

          .trend {
            font-size: 14px;
            &.up {
              color: #20bf6b;
            }
            &.down {
              color: #eb3b5a;
            }
          }

          .compare {
            color: #636e72;
            font-size: 12px;
          }
        }
      }
    }
  }

  .main-content {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 20px;
    margin-bottom: 20px;

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      h3 {
        margin: 0;
        color: #2d3436;
        font-size: 16px;
      }

      .header-actions {
        display: flex;
        gap: 12px;

        .search-input {
          width: 200px;
        }
      }
    }

    .task-form {
      padding: 20px 0;

      .form-select {
        width: 100%;
      }
    }

    .selected-robots {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid #eee;

      h4 {
        margin: 0 0 12px;
        color: #2d3436;
      }

      .robot-tag {
        margin: 0 8px 8px 0;
      }
    }
  }

  .history-section {
    .el-timeline {
      padding: 20px;
    }
  }
}

// 响应式设计
@media screen and (max-width: 1400px) {
  .assignment-page {
    .stat-row {
      grid-template-columns: repeat(2, 1fr);
    }

    .main-content {
      grid-template-columns: 1fr;
    }
  }
}

@media screen and (max-width: 768px) {
  .assignment-page {
    .stat-row {
      grid-template-columns: 1fr;
    }

    .main-content {
      .section-header {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;

        .header-actions {
          flex-direction: column;
        }
      }

      .search-input {
        width: 100%;
      }
    }
  }
}
</style>
